<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        .shopping {
            width: 600px;
            text-align: center;
            border: 2px solid black;
            margin: 30px auto;
            position: relative;
        }

        .shopping ul {
            width: 598px;
            height: 500px;
        }

        .shopping ul li {
            width: 598px;
            height: 150px;
            border: 1px solid black;
            line-height: 150px;
            position: relative;
        }

        img {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 30px;
            top: 30px;
        }

        .shopping_car {
            width: 600px;
            text-align: center;
            border: 2px solid black;
            margin: 30px auto;
            position: relative;
        }

        .shopping_car ul {
            width: 598px;
            height: 500px;
        }

        .shopping_car ul li {
            width: 598px;
            height: 150px;
            border: 1px solid black;
            line-height: 150px;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="shopping">
        <div>
            <h1>商品列表</h1>
            <input type="text" class="shopping_name" placeholder="请输入商品名称">
            <button onclick="sousuo()">搜索</button>
        </div>
        <ul class="liebiao">

        </ul>
    </div>
    <div class="shopping_car">
        <div>
            <h1>购物车</h1>
            <input type="checkbox" name="" id="quan">
            <button onclick="remove()">清空购物车</button>
        </div>
        <ul class="liebiao_car">

        </ul>
        <h1>总价￥:
            <span class="zongjia">0</span>
            <button onclick="jiesuan()">结算</button>
        </h1>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        //数据
        var arr = [{
            id: 1,
            img: './按摩椅.jpg',
            name: '按摩椅',
            price: 20,
            num: 1
        }, {
            id: 2,
            img: './手表.jpg',
            name: '手表',
            price: 40,
            num: 1
        }, {
            id: 3,
            img: './五粮液.jpg',
            name: '五粮液',
            price: 10,
            num: 1
        }]
        //渲染
        function xuanran() {
            $('.liebiao').html('')
            arr.forEach(item => {
                $('.liebiao').append(`
                <li>
                    <img src="${item.img}" alt="">
                    <span>${item.name}</span>&emsp;&emsp;
                    <span>${item.price}</span>&emsp;&emsp;
                    <button onclick='add_car(${item.id})'>加入购物车</button>
                </li>
                `)
            })
        }
        xuanran()
        //搜索
        function sousuo() {
            $('.liebiao').html('')
            arr.forEach(item => {
                //当输入框不是空字符串时目标商品重新渲染
                if ($('.shopping_name').val() == item.name) {
                    $('.liebiao').append(`
                     <li>
                        <img src="${item.img}" alt="">
                        <span>${item.name}</span>&emsp;&emsp;
                        <span>${item.price}</span>&emsp;&emsp;
                        <button onclick='add_car(${item.id})'>加入购物车</button>
                    </li>
                     `)
                }
                //当输入框是空字符串时商品重新渲染
                if ($('.shopping_name').val() == '') {
                    $('.liebiao').append(`
                     <li>
                        <img src="${item.img}" alt="">
                        <span>${item.name}</span>&emsp;&emsp;
                        <span>${item.price}</span>&emsp;&emsp;
                        <button onclick='add_car(${item.id})'>加入购物车</button>
                    </li>
                     `)
                }
            })
        }
        //添加到购物车
        var arr1 = [];
        function add_car(id) {
            var a = arr.find(item => item.id == id)
            arr1.push({
                id: a.id,
                img: a.img,
                name: a.name,
                price: a.price,
                num: a.num
            })
            zong()
            car_xuanran()
        }
        //商品车渲染
        function car_xuanran() {
            $('.liebiao_car').html('')
            arr1.forEach(item => {
                $('.liebiao_car').append(`
                    <li>
                        <input type="checkbox" name="" id="fanxuan" onchange='fanxuan()'>
                        <img src="${item.img}" alt="">
                        <span>${item.name}</span>&emsp;&emsp;
                        <span>${item.price}</span>&emsp;&emsp;
                        <button onclick='jia(${item.id})'>+</button>&emsp;&emsp;
                        <span>${item.num}</span>&emsp;&emsp;
                        <button onclick='jian(${item.id})'>-</button>&emsp;&emsp;
                        <button onclick='remove_car(${item.id})'>删除</button>
                    </li>
                `)
            })
        }
        //总价
        function zong() {
            var money = 0;
            arr1.forEach(item => {
                money += item.num * item.price
            })
            document.querySelector('.zongjia').innerHTML = money;
        }
        //加法
        function jia(id) {
            var a = arr1.find(item => item.id == id)
            a.num++
            car_xuanran()
            zong()
        }
        //减法
        function jian(id) {
            var a = arr1.find(item => item.id == id)
            if (a.num > 1) {
                a.num--
                car_xuanran()
                zong()
            } else {
                a.num = 1
            }
        }
        //删除
        function remove_car(id) {
            var a = arr1.findIndex(item => item.id == id)
            arr1.splice(a, 1)
            car_xuanran()
            zong()
        }
        //全选
        $('#quan').change(() => {
            var a = [...$('.shopping_car ul li input')]
            $.each(a, (index, item) => {
                item.checked = $('#quan').prop('checked')
            })
        })
        //反选
        function fanxuan() {
            var a = [...document.querySelectorAll('#fanxuan')]
            var flag = a.every(item => item.checked == true)
            if (flag) {
                document.querySelector('#quan').checked = true
            } else {
                document.querySelector('#quan').checked = false
            }
        }
        //清空购物车
        function remove() {
            arr1 = []
            car_xuanran()
            document.querySelector('.zongjia').innerHTML = 0;
        }
        //结算
        function jiesuan() {
            arr1 = []
            var a = document.querySelector('.zongjia').innerHTML;
            alert(`您一共消费了${a}元`)
            document.querySelector('.zongjia').innerHTML = 0
            car_xuanran()
        }
    </script>
</body>

</html>